<template>
    <el-carousel :height="height" :indicator-position="indicatorPosition" :arrow="arrow" label="我草">
        <el-carousel-item v-for="item in list" :key="item">
            <el-image class="image" :src="item.pic" fit="cover"></el-image>
        </el-carousel-item>
    </el-carousel>
</template>


<script>
export default {
    props: {
        height: {
            type: [String, Number],
            default: '200px'
        },
        indicatorPosition: {
            type: String,
            default: ""
        },
        arrow: {
            type: String,
            default: 'always'
        },
        loop: {
            type: Boolean,
            default: true
        },
        list: {
            type: Array,
            default: [

            ]
        }
    }
}
</script>

<style lang="less" scoped>
.el-carousel__item {
    background-color: #d3dce6;
}

.el-carousel :deep(.el-carousel__button) {
    width: 0.53rem;
    height: 0.16rem;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 0.08rem;
}

.el-carousel :deep(.is-active .el-carousel__button) {
    background: #FFFFFF;
}


.el-carousel :deep(.el-icon) {
    pointer-events: none;
}

.image {
    width: 100%;
    height: 100%;
}
</style>